<template>
	<view class="content">
		<!-- 电量显示栏-->
		<view class="top_nav">
			<view class="kong"></view>
			<!-- <image src="../../static/buy/1.png"></image> -->
			<view class="tab_item">
				<view class="return" @click="returnPage">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/course/jiantou.png"></image>
				</view>
				<view class="title">网赚</view>
				<view class="return"></view>
			</view>
		</view>
		
		<view class="swiper_wrap">
			<swiper class="swiper" indicator-dots autoplay circular :interval="3000" :duration="1000">
				<swiper-item class="swiper-item" v-for="item in swiper">
					<image :src="item" mode="aspectFit"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 网赚任务 -->
		<view class="online_earning">
			<view class="online_earning_item">
				<view class="choose_tiao" @click="jump">
					<view class="tiao_name">任务进度</view>
					<view class="tiao_right"><image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/539.png" mode="aspectFit"></image></view>
				</view>
				<view class="online_earning_item_wrap">
					
					<view class="earning_img">
						<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/www.png" mode="aspectFit"></image>
					</view>
					<view class="earning_item">
						<view class="earning_name">{{online_earning.title}}</view>
						<view class="earning_lv">{{online_earning.desc}}</view>
					</view>
					<view class="earning_money">+{{online_earning.money}}<text>元</text></view>
				</view>
				<view class="add_daili_wrap" @click="toOnlineRules(online_earning)">
					<view class="add_daili" >去完成</view>
				</view>
			</view>
		</view>
		
		
		<!-- 拉取任务 -->
		<view class="online_earning" @click="more_laxin">
			<view class="online_earning_item">
				<view class="choose_tiao" @click="jump">
					<view class="tiao_name">任务进度</view>
					<view class="tiao_right"><image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/539.png" mode="aspectFit"></image></view>
				</view>
				<view class="online_earning_item_wrap">
					
					<view class="earning_img">
						<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/www.png" mode=""></image>
					</view>
					<view class="earning_item">
						<view class="earning_name">拉新</view>
						<view class="earning_lv">支付宝拉新，淘宝拉新，淘宝首购，美团...</view>
					</view>
					<!-- <view class="earning_money">+{{online_earning.money}}<text>元</text></view> -->
				</view>
				<view class="add_daili_wrap">
					<view class="add_daili" >去完成</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		components:{
		},
		data() {
			return {
				swiper:['https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/online/13.png','https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/online/13.png'],
				online_earning:[
					{
						earning_img:'https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/online/14.png',
						name:'招商银行',
						successRate:'招行出品，成功率47.6%',
						money:'11.00',
						link:'https://www.baidu.com'
					},{
						earning_img:'https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/online/14.png',
						name:'招商银行',
						successRate:'招行出品，成功率47.6%',
						money:'11.00',
						link:'https://www.baidu.com'
					},{
						earning_img:'https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/online/14.png',
						name:'招商银行',
						successRate:'招行出品，成功率47.6%',
						money:'11.00',
						link:'https://www.baidu.com'
					}
				],
				url:"",
				token:'',
				style:{//设置web-view距离顶部的距离以及自己的高度，单位为px
					top: 450,//此处是距离顶部的高度，应该是你页面的头部
					height:300,//webview的高度
					width:"90%",
					left:"5%",
					marginTop:"850upx",
					scalable:false,      //webview的页面是否可以缩放，双指放大缩小
				}
			} 
		},
		onLoad(option) {
			this.token=option.token
		},
		onShow() {
			//获取网赚任务
					var url = '/task/quickpass'
					let params={
						token:this.token
					};
					this.Unfold_data.new_data(params, 'GET', url, res => {
						if (res.statusCode == 200 && res.data.code == 1) {
							this.online_earning = res.data.data
						} else if (res.statusCode == 200 && res.data.code == 401) {
							this.Unfold_data.showWindow(res.data.msg);
						} else {
							this.Unfold_data.showWindow(res.data.msg);
						}
					});
					
					this.Unfold_data.new_data({token:this.token}, 'POST', "/channel/m7/getMyWebUrl", res => {
						if (res.statusCode == 200 && res.data.code == 1) {
							this.url = res.data.data.web_url;
						} else {
							this.Unfold_data.showWindow(res.data.msg);
						}
					});
					
				},
		methods: {
			//跳转任务进度
			jump(){
				this.Unfold_data.showWindow('敬请期待')
				return
				uni.navigateTo({
					url:'/pages/onlineDetail/onlineDetail'
				})
			},
			//返回上一页
			returnPage(){
				uni.navigateBack({
					delta:1
				})
			},
			//跳转
			toOnlineRules(item){
				this.Unfold_data.externalLinks(item.url);
			},
			more_laxin(){
				let userInfo = uni.getStorageSync("userInfo");
				this.Unfold_data.new_data({user_id:userInfo.user_id,token:this.token}, 'POST', "/channel/m7/getMyWebUrl", res => {
					if (res.statusCode == 200 && res.data.code == 1) {
						this.url = res.data.data.web_url;
						uni.setStorageSync("browse_url",res.data.data.web_url)
						uni.navigateTo({
							url:"/pages/web/browse?url=1"
						})
					} else {
						this.Unfold_data.showWindow(res.data.msg);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
page{
	width: 100%;
	height: 100%;
	background: #282828;
}
.content{
	width: 100%;
	position: relative;
	.top_nav{
		width: 100%;
		height: 160upx;
		background-image: url('https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/buy/1.png');
		background-size: cover;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		.kong{
			width: 100%;
			height: 60upx;
		}
		.tab_item{
			width: 90%;
			margin: 0 auto;
			height: 100upx;
			display: flex;
			align-items: center;
			justify-content: center;
			.return{
				flex: 1;
				width: 100%;
				image{
					width: 29upx;
					height: 29upx;
				}
			}
			.title{
				flex: 8;
				width: 100%;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 10;
			}
		}
	}
	.swiper_wrap{
		width: 93.3%;
		margin: 0 auto;
		// height: 307upx;
		padding-top: 200upx;
		.swiper{
			width: 100%;
			height: 307upx;
			border-radius: 30upx;
			overflow: hidden;
			.swiper-item{
				width: 100%;
				height: 307upx;
				image{
					width: 100%;
					height: 307upx;
				}
			}
		}
	}
	.online_earning{
		width: 93.3%;
		margin: 0 auto;
		margin-top: 30upx;
		display: flex;
		flex-direction: column;
		.online_earning_title{
			width: 194upx;
			height: 63upx;
			background-image: url(https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/online/12.png);
			background-size: cover;
			padding-left: 40upx;
			line-height: 63upx;
		}
		.online_earning_item{
			padding: 20upx;
			width: 100%;
			background-color: #FFFFFF;
			margin-top: 20upx;
			border-radius: 20upx;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			.choose_tiao {
				width: 98%;
				margin: 0 auto;
				height: 50upx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.tiao_name {
					color:  #3385FF;
					font-size: 20upx;
					padding-right: 10upx;
				}
				.tiao_right {
					display: flex;
					align-items: center;
					justify-content: center;
					image {
						width: 20upx;
						height: 20upx;
					}
				}
			}
			.online_earning_item_wrap{
				flex-direction: row;
				width: 100%;
				padding: 20upx 0;
				display: flex;
				align-items: center;
				.earning_img{
					flex: 2;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 108upx;
						height: 101upx;
					}
				}
				.earning_item{
					flex: 4;
					.earning_name{
						padding-bottom: 10upx;
					}
					.earning_lv{
						font-size: 24upx;
						color: #7c7c7c;
					}
				}
				
				.earning_money{
					flex: 2;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #ba5d31;
					text{
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 20upx;
					}
				}
			}
			.add_daili_wrap{
				display: flex;
				// height: 10upx;
				flex-direction: row-reverse;
				width: 98%;
				position: relative;
				
				.add_daili{
					font-size: 20upx;
					width: 130upx;
					height: 45upx;
					border-radius: 8upx;
					background-image: linear-gradient(top,#ac1327,#e74b58);
					display: flex;
					align-items: center;
					justify-content: center;
					color: #ffffff;
				}
			}
		}
		
	}
}
</style>
